<template>
<div class="conBox">
    <div class="detailBox" v-if="list.length !== 0">
        <!-- <div class="title">
            <van-cell class="name" style="border-radius:8px 8px 0 0" :title="current.V_YQMC" :value="current.V_SJKSMC" />
            <van-cell class="num" :title="'住院号:'+current.I_BBH" :value="'床位号:'+current.V_BRBM" />
            <van-cell class="main" style="border-radius:0 0 8px 8px" :title="'主治医生:'+current.V_SHYS" value="住院时间:2019-08-22" />
        </div> -->

        <div class="detailBox">
            <van-collapse @change="collChange" v-model="activeName" accordion style="padding-left:12px;padding-right:12px;">
                <div v-for="(item,index) in list" :key="index" style="margin-bottom:12px;box-shadow: 0px 2px 10px 0px rgba(198, 198, 198, 0.8);border-radius:8px">
                    <!-- <div>{{item.D_JYSJ}} </div> -->
                    <van-collapse-item class="item" style="border-radius:8px" :name="index+1" :is-link="false">
                        <template #title>
                            <van-cell-group>
                                <!-- <van-cell class="names" :title="item.V_YQMC" :value="item.V_SJKSMC" is-link /> -->
                                <!-- <van-cell class="num" :title="'住院号:'+item.I_BBH" :value="'床位号:'+item.V_BRBM" />
                                <van-cell class="main" :title="'主治医生:'+item.V_SHYS" :value="'住院时间:'+item.D_JYSJ" /> -->
                                <div class="viewBox">

                                    <div class="viewItem">
                                        <div style="color:#252525;font-weight:900">{{item.V_YQMC}}</div>
                                        <div style="color:#969799;font-size:13px">{{item.V_SJKSMC}}</div>
                                    </div>

                                    <div class="viewItem">
                                        <div style="color:#969799;font-size:13px">标本号:{{item.I_BBH}}</div>
                                        <div style="color:#969799;font-size:13px">检测编码:{{item.V_BRBM}}</div>
                                    </div>

                                    <div class="viewItem">
                                        <div style="color:#969799;font-size:13px">送检医生:{{item.V_SJYSMC}}</div>
                                        <div style="color:#969799;font-size:13px">检测时间:{{item.D_JYSJ}}</div>
                                    </div>

                                    <van-cell is-link style="margin-top:8px" />

                                </div>
                                <!-- <div style="width:100%;display:flex;flex-direction:column;align-items:center">
                                      <img src="../../../assets/memberImg/xiala.png" style="width:20px;height:20px" alt="">
                                      <span style="font-size:8px;color:rgba(198, 198, 198, 1)">查看更多</span>
                                </div> -->

                            </van-cell-group>
                        </template>
                        <div class="detailContent">
                            <div v-if="!finshDetail" class="load">加载中....</div>
                            <div v-if="finshDetail" class="detailData">

                                <div class="tableHead">
                                    <div class="tableHeadItem">英文名称</div>
                                    <div class="tableHeadItem">中文名称</div>
                                    <div class="tableHeadItem">测定值</div>
                                    <div class="tableHeadItem">参考范围</div>
                                    <div class="tableHeadItem">单位</div>

                                </div>

                                <div class="tableTr" v-for="(myItem,i) in currentDetail" :key="i">
                                    <div class="trItem">{{myItem.V_YWMC}}</div>
                                    <div class="trItem">{{myItem.V_XMMC}}</div>
                                    <div class="trItem">{{myItem.V_JYJG}}</div>
                                    <div class="trItem">{{myItem.V_CKZ}}</div>
                                    <div class="trItem">{{myItem.V_DW}}</div>

                                </div>

                                <div class="trItem" style="width:100%;text-align:center;margin-top:15px" v-if="currentDetail.length !== 0">
                                    * 本次检测结果只对当天检查有效
                                </div>

                                <div>
                                    <van-cell v-if="currentDetail.length == 0" value="暂无数据" />
                                </div>

                            </div>

                        </div>

                    </van-collapse-item>
                </div>

            </van-collapse>
        </div>
    </div>

    <div v-if="list.length == 0" style="margin-top:15px">
        <van-cell value="暂无数据" />
    </div>

    <float-icons padding="10 0 60 0" class="icons-warp">
        <div class="float-icon-item">
            <img src="../../../assets/dargIcon/back.png" alt="" @click="handleIcons('/home')" />
            <span>返回</span>
        </div>
        <!-- <div class="float-icon-item">
            <img src="../../assets/dargIcon/cart-icon.png" alt="" @click="handleIcons('/cart')" />
            <span>购物车</span>
        </div> -->
    </float-icons>

</div>
</template>

<script>
import {isbind} from "../../isCheckBind.js"
import FloatIcons from '@/components/s-icons'
import {
    toast
} from "../../../utils/toast.js"
import {
    getReportBlood,
    getDetal
} from "../../../sgApi/index.js"
export default {
    name: "reportDetail",
    components: {
        FloatIcons
    },
    data() {
        return {
            list: [
                // {
                //     "tb_customer_id": "20170902082453129000",
                //     "D_CJSJ": "2021-12-23 11:10:00",
                //     "D_JYSJ": "2021-12-23 11:10:02",
                //     "consultname": "陈丹辉",
                //     "V_BRBM": "202112230053",
                //     "V_YQMC": "全自动血细胞分析仪",
                //     "V_BRXM": "杜娜",
                //     "V_XB": "女",
                //     "V_NL": "36",
                //     "V_SJKSMC": "整形外科",
                //     "V_SJYSMC": "刘杰伟",
                //     "V_JYYS": "黎泽敏",
                //     "V_SHYS": "熊德贵",
                //     "I_BBH": "136560",
                //     "V_BBLX": "全血"

                // },

                // {
                //     "tb_customer_id": "20170902082453129000",
                //     "D_CJSJ": "2021-12-23 11:10:00",
                //     "D_JYSJ": "2021-12-23 11:10:02",
                //     "consultname": "陈丹辉",
                //     "V_BRBM": "202112230053",
                //     "V_YQMC": "全自动血细胞分析仪",
                //     "V_BRXM": "杜娜",
                //     "V_XB": "女",
                //     "V_NL": "36",
                //     "V_SJKSMC": "整形外科",
                //     "V_SJYSMC": "刘杰伟",
                //     "V_JYYS": "黎泽敏",
                //     "V_SHYS": "熊德贵",
                //     "I_BBH": "136560",
                //     "V_BBLX": "全血"

                // },

            ],
            current: {

                // "tb_customer_id": "201709020824531299",
                // "D_CJSJ": "2021-12-23 11:10:00",
                // "D_JYSJ": "2021-12-30 11:10:02",
                // "consultname": "陈丹辉",
                // "V_BRBM": "202112230053",
                // "V_YQMC": "全自动血细胞分析仪",
                // "V_BRXM": "杜娜",
                // "V_XB": "女",
                // "V_NL": "36",
                // "V_SJKSMC": "整形外科",
                // "V_SJYSMC": "刘杰伟",
                // "V_JYYS": "黎泽敏",
                // "V_SHYS": "熊德贵",
                // "I_BBH": "136560",
                // "V_BBLX": "全血"

            },
            finshDetail: false,
            currentDetail: [
                // {
                //     "V_YWMC": "PT-S",
                //     "V_XMMC": "凝血酶原时间",
                //     "V_JYJG": "11.0",
                //     "V_CKZ": "9.0～15.0",
                //     "V_DW": "S"
                // },
                // {
                //     "V_YWMC": "PT-S",
                //     "V_XMMC": "凝血酶原时间",
                //     "V_JYJG": "11.0",
                //     "V_CKZ": "9.0～15.0",
                //     "V_DW": "S"
                // },

            ],
            activeName: null,
        }
    },
    mounted() {
        isbind()
        this.init()
    },
    methods: {
        toGetDetail(id) {
            getDetal({
                V_BRBM: id
                //  id
            }).then(res => {

                this.currentDetail = res.data
                this.finshDetail = true

            })

        },
        handleIcons(id) {
            this.$router.replace({
                path: "/memberCenter"
            })
        },

        collChange(value) {
            this.finshDetail = false
            this.current = this.list[value - 1]

            console.log(this.current)

            this.toGetDetail(this.current.V_BRBM)

        },
        init() {
            new Promise((resolve, reject) => {

                getReportBlood({
                    // 20170902082453129000
                    customerCrmId: localStorage.getItem("customerCrmId"),

                    checkType: sessionStorage.getItem("reportId")
                }).then((res) => {
                    if (res.code == 0) {

                        this.list = res.data 
                        this.current = res.data[0]
                        resolve(res.data[0].V_BRBM)

                    } else {
                        toast({
                            message: "网络错误",
                            time: 2000
                        })
                    }
                })

            }).then((id) => {
                console.log("id", id)
                //  202112230051
                this.toGetDetail(id)

            })

        }
    }
}
</script>

<style lang="scss" scoped>
.conBox {
    width: 100%;
}

.icons-warp {
    // border-radius: 25px;
    border-radius: 25px 0 0 25px;

    .float-icon-item {
        display: flex;
        flex-direction: row;
        // padding-left: 14px;
        // padding-right: 14px;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 80px;
        height: 40px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            margin-left: 5px;
            font-size: 12px;
            color: #666666;
        }
    }
}

.detailBox {
    width: 100%;
    // padding-left: 15px;
    // padding-right: 15px;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 12px;

    .title {
        // border-radius: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
        // background-color: #ffffff;
        // box-shadow: 0px 2px 10px 0px rgba(198, 198, 198, 0.4);

    }

    .detailBox {
        // border-radius: 8px;
        // margin-top: 16px;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
        // height: 200px;
        // background-color: #ffffff;
        // box-shadow: 0px 2px 10px 0px rgba(198, 198, 198, 0.8);

        [class*=van-hairline]::after {
            border: none
        }

        .van-collapse {
            .item {

                .viewBox {
                    width: 100%;
                    background-color: #ffffff;

                    // padding-bottom: 6px;

                    .viewItem {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                    }

                }

                .van-cell {
                    padding-top: 2px;
                    padding-bottom: 2px;
                    padding-left: 0;
                    padding-right: 0;
                    justify-content: center;
                }

                .van-cell::after {
                    border-bottom: none
                }

                /deep/.van-cell {
                    padding-bottom: 0;

                    .van-cell__title {
                        color: #252525;
                        font-size: 14px;
                        font-weight: 600;
                    }
                }

                /deep/.names {
                    .van-cell {
                        .van-cell__title {
                            color: red !important;
                            font-size: 14px;
                            font-weight: 600;
                        }
                    }
                }

                /deep/.van-collapse-item__wrapper {
                    .van-collapse-item__content {
                        // padding-bottom: 30px;
                        padding-left: 8px;
                        padding-right: 0;
                    }
                }

                .detailContent {
                    // position: relative;

                    .load {
                        width: 100%;
                        text-align: center;
                        // position: absolute;
                        // height: 50px;

                    }

                    .detailData {
                        width: 100%;
                        background-color: #ffffff;
                        // position: absolute;

                        .tableHead {
                            width: 100%;
                            display: flex;
                            margin-bottom: 10px;

                            .tableHeadItem {
                                flex: 1;
                                text-align: center;
                                font-size: 13px;
                                color: #252525;
                                font-weight: 600;
                            }
                        }

                        .tableTr {
                            width: 100%;
                            display: flex;

                            .trItem {
                                margin-bottom: 2px;
                                flex: 1;
                                text-align: center;
                                font-size: 13px;

                            }
                        }
                    }
                }

            }
        }
    }
}
</style>
